<template>
  <div class="course-wrap">
    <div class="course-images">
        <img class="course-preview" :src="appointment.course.preview.image | qnImg(null, 200)">
    </div>
    <div class="information">
        <!-- 教练简介 -->
        <div class="coach-info course-base">
            <div class="coach-pic">
                <img class="coach-img" :src="appointment.coach.preview.image | qnImg(null, 200)">
                <div>{{appointment.coach && appointment.coach.name}}</div>
            </div>
            <div class="comment coach-comment">{{appointment.coach && appointment.coach.description}}</div>
        </div>
        <!-- 课程基础信息 -->
        <div class="course-base">
            <div class="step-title">
                <div class="step-title-left">
                    <van-icon class="step-icon" name="records"/>
                    <span class="step-tip">课程基础信息</span>
                </div>
            </div>
            <van-cell-group>
                 <van-cell class="course-info-item" icon="records" :title="appointment.course.name"/>
                <van-cell class="course-info-item" icon="clock" :title="appointment.start_time +' - '+appointment.end_time"/>
                <van-cell class="course-info-item" icon="location" :title="appointment.gym.name" is-link />
                <van-cell class="course-info-item" icon="records" :title="statusMap[appointment.checkin + '']" is-link />
            </van-cell-group>
        </div>
    </div>
    <!-- 签到 -->
    <div class="course-appoint">
        <van-button @click="toSign" type="primary" v-if="appointment.checkin === 1" bottom-action>
            签到
        </van-button>
        <van-button @click="toSign" type="primary" v-if="appointment.checkin === 0" bottom-action>
            签到
        </van-button>
        <van-button :disabled="true" @click="toSign" type="primary" v-if="appointment.checkin === 2" bottom-action>
            已完成
        </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appointment-sign',
  comments: 'appointment-sign',
  data () {
    return {
      appointment: {},
      statusMap: {
          0: '待签到',
          1: '已签到',
          2: '已确认签到'
      },
      previewImage: '',
      coachImage: '',
      thumb: './static/images/头像3.jpg'
    }
  },
  created () {
    this.toSign()
  },
  methods: {
    // 签到
    toSign () {
      var that = this
      var course_id = this.$router.currentRoute.params.course_id
      console.log(this.$router.currentRoute.params)
      var appointment_id = this.$router.currentRoute.params.id
      var user_id = JSON.parse(localStorage.getItem('user')).id
      this.$axios.put('/users/' + user_id + '/courses/' + course_id + '/appointments/' + appointment_id).then(response => {
          console.log(response)
          this.appointment = response.data;
          this.$toast(response.data.message);
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.course-base{
    background-color: #333;
}
.icons{
    color: #cece28;
    text-align: left;
}
.icons span{
    color: white;
}
.icons>div{
    color: white;
}
.van-cell, .van-cell-group{
    background-color:#3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.van-hairline--top-bottom::after{
    border-width: 0px 0;
}
.course-images{
    overflow: hidden;
}
.course-preview{
    height: 150px;
    width: 100%;
}
.course-wrap{
    margin-bottom: 50px;
}
.course-video{
    width: 100%;
    height: auto;
}
.__cov-video{
    max-height: 100%;
}
.information{
    padding: 0px 5px 8px 5px;
    color: #f8f8f8;
}
.information div:first-child{
    margin-top: 0px;
}
.information>div{
    margin-top: 5px;
    border-radius: 5px;
}
.coach-info{
    min-height: 100px;
    padding: 10px;
}
.coach-pic{
    width: 30%;
    min-height: 100px;
    float: left;
    display: inline;
}
.coach-img{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-top: 10px;
}
.comment{
    text-align: left;
    font-size: 0.8rem;
    text-indent: 2em;
    line-height: 1rem;
    padding: 10px;
}
.coach-comment{
    width: 70%;
    display: inline-block;
    text-indent: 2em;
    padding: 0px;
}
.course-info-item{
    color: #f8f8f8;
    text-align: left;
}
.course-detail{
    background-color: #3c3a3a;
}
.course-tag{
    text-align: left;
    margin: 0px 10px;
}
.course-tag span:first-child{
    margin-left: 0px;
}
.course-tag-item{
    margin-left: 3px;
    margin-bottom: 3px;
}
.border_radius{
    border-radius: 0px 0px 5px 5px;
}
.course-img{
    width: auto;
    height: 100px;
    display: inline-flex;
    overflow-x: scroll;
    padding: 10px;
    background-color: #3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.course-img img{
    width: 49%;
    float: left;
    display: inline;
    margin-left: 2%;
}
.course-img img:first-child{
    margin-left: 0px;
}
.course-step{
    background-color: #3c3a3a;
    border-radius: 0px 0px 5px 5px;
}
.step-title {
    height: 1.4rem;
    line-height: 1.4rem;
    font-size: 1rem;
    text-align: left;
    color: #f8f8f8;
    padding: 5px 10px;
    position: relative;
    border-radius: 5px 5px 0px 0px;
    background-color: #333;
}
.step-title-left{
    display: flex;
    justify-content: center;
    float: left;
}
.step-icon{
    color: yellow;
    align-self: center;
}
.step-tip{
    margin-left: 8px;
}
.step-desc{
    color: #f8f8f8;
}
.course-appoint{
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 999;
}
</style>
